<!DOCTYPE html>

<html lang="en" data-content_root="../../">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>The Pytch web app &#8212; Pytch  documentation</title>
    <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=03e43079" />
    <link rel="stylesheet" type="text/css" href="../../_static/classic.css?v=36340f97" />
    <link rel="stylesheet" type="text/css" href="../../_static/css/pytch-classic.css?v=0321735e" />
    
    <script src="../../_static/documentation_options.js?v=7f41d439"></script>
    <script src="../../_static/doctools.js?v=9bcbadda"></script>
    <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script>
    
    <link rel="icon" href="../../_static/favicon.ico"/>
    <link rel="author" title="About these documents" href="../../about.html" />
    <link rel="index" title="Index" href="../../genindex.html" />
    <link rel="search" title="Search" href="../../search.html" />
    <link rel="next" title="Following a tutorial" href="tutorials.html" />
    <link rel="prev" title="Using the Pytch web app" href="index.html" /> 
  </head><body>
<div class="NavBar">
  <a href="../../../app/"><h1>Pytch</h1></a>
  <ul>
    <a href="https://pytch.scss.tcd.ie/"><li>About Pytch</li></a>
    <a href="../../index.html"><li>Help</li></a>
    <a href="../../../app/tutorials/"><li>Tutorials</li></a>
    <a href="../../../app/my-projects/"><li>My projects</li></a>
  </ul>
</div>
<div class="warning-work-in-progress">
  <p>These help pages are incomplete — we are working on it!</p>
</div>
  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <section id="the-pytch-web-app">
<h1>The Pytch web app<a class="headerlink" href="#the-pytch-web-app" title="Link to this heading">¶</a></h1>
<p>TODO: Fill in structure of below.</p>
<p>The Pytch web app has three main areas:</p>
<ul class="simple">
<li><p>The <em>code editor</em>, where you write the Python code for your project.</p></li>
<li><p>The <em>stage</em>, which is very much like Scratch’s stage, and is where
your project runs.</p></li>
<li><p>The <em>information area</em>, which allows you to work with your project’s
images or sounds, and also shows you any text output your project
prints, and any errors your project encounters.  If your project is
following a tutorial, the tutorial content is part of the
information area too.</p></li>
</ul>
<p>TODO: Screenshots, more details.</p>
<ul class="simple">
<li><p>Working with graphics and sounds, or a tutorial, ‘wide info pane’ is
more useful layout</p></li>
<li><p>Once working mostly with code, ‘tall code editor’ layout more useful</p></li>
</ul>
<section id="resizing-the-stage-display">
<h2>Resizing the stage display<a class="headerlink" href="#resizing-the-stage-display" title="Link to this heading">¶</a></h2>
<p>When in ‘wide info pane’ mode, you can drag the horizontal divider
(separating the code editor and stage above from the info pane below)
up to make more room for the info pane, or down to see the stage more
clearly.</p>
<p>If you click on the already-active layout selection button, the stage
size is reset to its normal size.</p>
<p>Whatever size the stage is displayed on your scree, as far as Pytch is
concerned, the centre of the stage is always at (0, 0), its
bottom-left corner is always at (-240, -180), and its top-right corner
is always at (240, 180).</p>
<p>TODO: This needs to be more discoverable.</p>
</section>
</section>


            <div class="clearer"></div>
          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="Main">
        <div class="sphinxsidebarwrapper"><ul class="current">
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Using the Pytch web app</a><ul class="current">
<li class="toctree-l2 current"><a class="current reference internal" href="#">The Pytch web app</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#resizing-the-stage-display">Resizing the stage display</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="tutorials.html">Following a tutorial</a></li>
<li class="toctree-l2"><a class="reference internal" href="writing-code.html">Writing and running your code</a></li>
<li class="toctree-l2"><a class="reference internal" href="running-your-program.html">Running your project</a></li>
<li class="toctree-l2"><a class="reference internal" href="graphics-and-sounds.html">Graphics and sounds</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../medialib/user/index.html">The Pytch media library</a></li>
<li class="toctree-l2"><a class="reference internal" href="printing-output.html">Printing output from your project</a></li>
<li class="toctree-l2"><a class="reference internal" href="errors-and-debugging.html">Errors in Pytch projects</a></li>
<li class="toctree-l2"><a class="reference internal" href="index.html#privacy">Privacy</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../vm/user/index.html">Writing Pytch programs</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../about.html">About Pytch</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../contact.html">Contact</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../developer.html">Developer documentation</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../legal/index.html">Legal information</a></li>
</ul>
<div class="docs-home-link"><hr>
  <ul>
    <li>
      <a href="../../index.html">Pytch help home</a>
    <li>
  </ul>
</div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  </body>
</html>